<?php $this->load->view('common/default_header.php');?>

<div class="container">
	<div class="row">
		<?php $this->load->view('common/index_nav.php');?>
		<h3><?php echo $productData['desc'];?>－交易中心</h3>

		<table class="table table-condensed table-bordered">
			<tr>
		  		<th>产品名称</th>
		  		<th>卖一</th>
		  		<th>中间价</th>
		  		<th>买一</th>
		  		<th>昨收</th>
		  		<th>涨跌</th>
		  		<th>涨跌幅</th>
		  		<th>更新时间</th>
		  	</tr>
			<?php 
				$name = $productData['name'];
		 	?>
		  	<tr>
		  		<td><?php echo $productData['desc'];?> (<?php echo $productData['symbol'];?>)</td>
		  		<td class="success" id="<?php echo $name;?>_ASK_PRICE">--</td>
		  		<td class="warning" id="<?php echo $name;?>_LAST_PRICE">--</td>
		  		<td class="info" id="<?php echo $name;?>_BID_PRICE">--</td>
		  		<td id="<?php echo $name;?>_CLOSE_PRICE">--</td>
		  		<td id="<?php echo $name;?>_UD">--</td>
		  		<td id="<?php echo $name;?>_RANGE">--</td>
		  		<td id="<?php echo $name;?>_exchange_time">--</td>
		  	</tr>
		</table>
		<p>
			佣金：
			<span class="label label-success">买多：<span class="bidCom"></span>点/手</span>
			<span class="label label-danger">卖空：<span class="askCom"></span>点/手</span>

			<input type="hidden" id="bidCom" value="">
			<input type="hidden" id="askCom" value="">
		</p>
		<br>
		<h4>计价方式：</h4>
        <ul class="nav nav-pills">  
        	<?php if(!empty($productConfig)) foreach($productConfig as $dType=>$items){?>
			<li <?php echo ($dType=='btc')?'class="active"':'';?>><a href="#<?php echo $dType;?>-denominated" data-toggle="tab"><b><?php echo $items['currency'];?></b></a></li>  
			<?php }?>
        </ul>  
	    <div class="tab-content">  
	    <?php if(!empty($productConfig)) foreach($productConfig as $dType=>$items){?>
	    	<div class="tab-pane <?php echo ($dType=='btc')?'active':'';?>" id="<?php echo $dType;?>-denominated">
				<h4>市价</h4>
				<form method="post" accept-charset="utf-8" id="<?php echo $dType;?>MarketOrderForm">
				  <div class="form-group">
				    <label for="phone">每手交易保证金：</label>
				    <?php if(!empty($items)) foreach($items['times'] as $times){?>
				    <div class="radio-inline">
				    	<input type="radio" name="marketOrderMargin<?php echo $dType;?>" id="marketOrderMargin<?php echo $dType;?>" value="<?php echo $times;?>"> <?php echo $times.$items['symbol'];?>
				   	</div>
				    <?php }?>
				  </div>
				  <div class="form-group">
				    <label for="phone">开仓手数（市价）：</label>
				    <input type="text" name="marketOrderNum<?php echo $dType;?>" class="form-control" id="marketOrderNum<?php echo $dType;?>" placeholder="市价开仓手数">
				  </div>
				  <div class="form-group">
				  		<a href="javascript:takeOrder(<?php echo $productData['pid'];?>,'<?php echo $dType;?>','bid',0,0,this)" class="btn btn-success">市价买多</a>
				  		<a href="javascript:takeOrder(<?php echo $productData['pid'];?>,'<?php echo $dType;?>','ask',0,0,this)" class="btn btn-danger">市价卖空</a>
				  </div>
				</form>
				<hr>
				<h4>限价</h4>
				<form method="post" accept-charset="utf-8" id="<?php echo $dType;?>LimitOrderForm">
				  <div class="form-group">
				    <label for="phone">每手交易保证金：</label>
				    <?php if(!empty($items)) foreach($items['times'] as $times){?>
				    <div class="radio-inline">
				    	<input type="radio" name="limitOrderMargin<?php echo $dType;?>" id="limitOrderMargin<?php echo $dType;?>" value="<?php echo $times;?>"> <?php echo $times.$items['symbol'];?>
				    </div>
				    <?php }?>
				  </div>
				  <div class="form-group">
				    <label for="phone">开仓价格（限价）：</label>
				    <input type="text" name="limitOrderPrice<?php echo $dType;?>" class="form-control" id="limitOrderPrice<?php echo $dType;?>" placeholder="限价开仓价格">
				  </div>
				  <div class="form-group">
				    <label for="phone">开仓手数（限价）：</label>
				    <input type="text" name="limitOrderNum<?php echo $dType;?>" class="form-control" id="limitOrderNum<?php echo $dType;?>" placeholder="限价开仓手数">
				  </div>
				  <div class="form-group">
				    <label for="phone">佣金限制（限价）：</label>
				    <select id="limitOrderCom<?php echo $dType;?>" name="limitOrderCom<?php echo $dType;?>"  class="form-control">
						<option value="5">= 5点</option>
						<option value="15">&lt; 15点</option>
						<option value="25" selected="selected">&lt; 25点</option>
					</select>
				  </div>
				  
				  <div class="form-group">
				  		<a href="javascript:takeOrder(<?php echo $productData['pid'];?>,'<?php echo $dType;?>','bid',1,0,this)" class="btn btn-success">限价买多</a>
				  		<a href="javascript:takeOrder(<?php echo $productData['pid'];?>,'<?php echo $dType;?>','ask',1,0,this)" class="btn btn-danger">限价卖空</a>
				  </div>
				</form>
			</div>
			<?php }?>
		</div>	
	</div>
</div>

<?php $this->load->view('common/default_footer.php');?>

<script type="text/javascript">
var tmpData = {};
var socket = io.connect('<?php echo $socket_url;?>',{'max reconnection attempts':'Infinity','reconnectiondelay':5,'reconnection limit':3000});
socket.on('connect', function() {
	<?php 
		$name = $productData['name'];
		$tradeKey = $name."_TRADE";
 	?>
	socket.on('<?php echo $tradeKey?>', function(data) {
		if(tmpData['<?php echo $tradeKey?>']==undefined ||tmpData['<?php echo $tradeKey?>'].LAST_PRICE!=data.LAST_PRICE){
			$("#<?php echo $name;?>_LAST_PRICE").html(data.LAST_PRICE);
			flash("#<?php echo $name;?>_LAST_PRICE","danger","warning");
		}
		if(tmpData['<?php echo $tradeKey?>']==undefined ||tmpData['<?php echo $tradeKey?>'].BID_PRICE!=data.BID_PRICE){
			$("#<?php echo $name;?>_BID_PRICE").html(data.BID_PRICE);
			flash("#<?php echo $name;?>_BID_PRICE","danger","info");
		}
		if(tmpData['<?php echo $tradeKey?>']==undefined ||tmpData['<?php echo $tradeKey?>'].ASK_PRICE!=data.ASK_PRICE){
			$("#<?php echo $name;?>_ASK_PRICE").html(data.ASK_PRICE);
			flash("#<?php echo $name;?>_ASK_PRICE","danger","success");
		}
		if(tmpData['<?php echo $tradeKey?>']==undefined ||tmpData['<?php echo $tradeKey?>'].CLOSE_PRICE!=data.CLOSE_PRICE){
			$("#<?php echo $name;?>_CLOSE_PRICE").html(data.CLOSE_PRICE);
		}
		if(tmpData['<?php echo $tradeKey?>']==undefined ||tmpData['<?php echo $tradeKey?>'].UD!=data.UD){
			$("#<?php echo $name;?>_UD").html(data.UD);
			flash("#<?php echo $name;?>_UD");
		}
		if(tmpData['<?php echo $tradeKey?>']==undefined ||tmpData['<?php echo $tradeKey?>'].RANGE!=data.RANGE){
			$("#<?php echo $name;?>_RANGE").html(data.RANGE+"%");
			flash("#<?php echo $name;?>_RANGE");
		}
		if(tmpData['<?php echo $tradeKey?>']==undefined ||tmpData['<?php echo $tradeKey?>'].exchange_time!=data.exchange_time){
			$("#<?php echo $name;?>_exchange_time").html(data.exchange_time); 
		}
		if(data.UD>0){
        	$("#<?php echo $name;?>_UD").removeClass("red").addClass("green");
        	$("#<?php echo $name;?>_RANGE").removeClass("red").addClass("green");
        	
        }else{
        	$("#<?php echo $name;?>_UD").removeClass("green").addClass("red");
        	$("#<?php echo $name;?>_RANGE").removeClass("green").addClass("red");
        }
        $("#askCom").val(data.ASK_COM);
        $(".askCom").html(data.ASK_COM);
		$("#bidCom").val(data.BID_COM);
		$(".bidCom").html(data.BID_COM);
		tmpData['<?php echo $tradeKey?>'] = data;
	});
	socket.on('disconnect', function(data) {

	});
	socket.on('error', function(data) {
		return;
	});
});

function flash(ele,newClass,oldClass){
	if(newClass == undefined) newClass='danger';
	if(oldClass == undefined) oldClass='';
	$(ele).removeClass(oldClass).addClass(newClass);
	setTimeout(function(){
		$(ele).removeClass(newClass).addClass(oldClass);
	},200);
}


function takeOrder(pid,dtype,action,type,chiId,btnElem){
	if(type == 2){//平仓操作
		var price = $('#pingOrderPrice_'+dtype+action+chiId).val();
		var num = $('#pingOrderNum_'+dtype+action+chiId).val();
		if(num=='' || num<=0){
			alert("请输入平仓数量！");
			$('#pingOrderNum_'+dtype+action+chiId).focus();
			return; 
		}
		if(price == undefined || price=='' || price<=0){//提示是否用市价挂单
			var objData = {pid:pid, dtype:dtype, action:action+'_ping', num:num, chiId:chiId};
		}else{
			var objData = {pid:pid, dtype:dtype, action:action+'_ping', price:price, num:num, chiId:chiId};
		}
	}else{//开仓操作
		var orderType = (type==0)?'marketOrder':'limitOrder';
		var com = $('#'+action+'Com').val();
		var num = $('#'+orderType+'Num'+dtype).val();
		if(com=='' || com<0 || com==undefined){
			alert("操作失败[10001]！");
			return;
		}
		if(num=='' || num<=0){
			alert("请输入开仓数量！");
			$('#'+orderType+'Num'+dtype).focus();
			return;
		}
		if(type==1){//限价下单
			var price = $('#'+orderType+'Price'+dtype).val();
			if(price=='' || price<=0){
				alert("请输入开仓价格！");
				$('#'+orderType+'Price'+dtype).focus();
				return;
			}
			//var limitOrderMargin = $('#limitOrderMargin').val();//select
			var limitOrderMargin = $("input[name='limitOrderMargin"+dtype+"']:checked").val();//radio
			com = $("#limitOrderCom"+dtype).val();
			var objData = {pid:pid, dtype:dtype, action:action, price:price, num:num, com:com, type:type, times:limitOrderMargin};
		}else{
			//var marketOrderMargin = $('#marketOrderMargin').val();//select
			var marketOrderMargin = $("input[name='marketOrderMargin"+dtype+"']:checked").val();//radio
			var objData = {pid:pid, dtype:dtype, action:action, num:num, com:com, type:type, times:marketOrderMargin};
		}
		
	}
	console.log(objData);
	var btnObj = $(btnElem);
	var disable = btnObj.hasClass("disabled");
	if ((disable == false || disable == undefined)) {
		btnObj.addClass("disabled");
		postData(objData,btnObj);
	}
}

function postData(objData,btnObj){
	$.ajax({
		type: 'POST',
		dataType: 'json',
		timeout: 10000,
		url: "/cfd/ajaxPost",
		data: objData,
		success:function(data) {
			alert(data.msg);
			btnObj.removeClass("disabled");
		},
		error: function() {
			// alert("提交失败！");
			btnObj.removeClass("disabled");
		}
	});
}

</script>

</body>


</html>